<!doctype html>
<html>
	<head>
		<title>无缝滚动innerHTML</title>
		<meta charset="utf-8">
		<style>
			body{
			margin:0;
			padding:0;
			}
			ul{
				margin:0;
				padding:0;
			}
			#div1{
				overflow: hidden;
				width:700px;
				height:95px;
				border:1px dashed #000;
				position: relative;
				margin:20px auto;
			}
			#div2{
				width:700px;
				height:95px;
				position:absolute;
				top:0;
				left:0;
			}
			#div2 li{
				width:120px;
				float:left;
				margin: 10px;
				list-style: none;
			}
			#div1 li img{
				width: 100%;
				
			}
			#div1 li img{
				filter:alpha(opacity:30);
				opacity:0.3;
			} 
			#btn{
				width:200px;
				height:40px;
				margin:100px auto;
			}
			a{
				text-decoration: none;
				min-width:20px;
				min-height:20px;
				text-align: center;
				border:1px solid #000;
				float:left
			}
			.active{
				background:yellow;
			}
			#btn1,#btn2{
				width:50%;
				height:100%;
				position: relative;
				z-index: 20;
			}
			#btn1{
				float:left;
			}
			#btn1 img{
				margin-top:20px;
				display: none;
			}
			#btn2{
				float:right;
			}
			#btn2 img{
				margin-top: 20px;
				float:right;
				display: none;
			}
		</style>
		<script>
			window.onload=function(){
				var arr=[];
				function init()
				{	
					for(var each in arr)
					{
						clearInterval(arr[each]);
					}
				}
				var oDiv1=document.getElementById('div1');
				var oDiv2=document.getElementById('div2');
				var ali=oDiv1.getElementsByTagName('li');
				var aImg=oDiv2.getElementsByTagName('img');
				var oBtn=document.getElementById('btn');
				var aBtns=oBtn.getElementsByTagName('a');
				var oBtn1=document.getElementById('btn1');
				var xz=oBtn1.getElementsByTagName('img')[0];
				var oBtn2=document.getElementById('btn2');
				var xy=oBtn2.getElementsByTagName('img')[0];
				oBtn1.onmouseover=function(){
					xz.style.display="block";
				}
				oBtn1.onmouseout=function(){
					xz.style.display="none";
				}
				oBtn2.onmouseover=function(){
					xy.style.display="block";
				}
				oBtn2.onmouseout=function(){
					xy.style.display="none";
				}
				oDiv2.innerHTML+=oDiv2.innerHTML;		
				var timer=null;
				oDiv2.style.width=ali.length*(ali[0].offsetWidth+20)+'px';
				var now=0;
				var dir=1;
				function go(FX){
					dir=FX;
					for(var i=0;i<aImg.length;i++)
					{
						aImg[i].style.opacity="0.3";
						aImg[i].style.filter='alpha(opacity:30)';
					}
					for(var i=0;i<aBtns.length;i++)
					{
						aBtns[i].className="";
					}
					if(FX==-1)					
					{
						if(oDiv2.offsetLeft<=-oDiv2.offsetWidth/2)
						{
						oDiv2.style.left='0';
						}
						oDiv2.style.left=oDiv2.offsetLeft-20-ali[0].offsetWidth+'px';	
						now=now%5;	
						now++;
						//alert(now);	
						aImg[now].style.opacity="1";
						aImg[now].style.filter='alpha(opacity:100)';
						now=now%5;
						aBtns[now+1].className="active";
					}
					else{
						if(oDiv2.offsetLeft>=0)
						{
							oDiv2.style.left=(-20-ali[0].offsetWidth)*Math.floor(aImg.length/2)+'px';
						}
						oDiv2.style.left=oDiv2.offsetLeft+20+ali[0].offsetWidth+'px';		
							
							if(now==0)
							{
								now=5;
							}
							
						aImg[now-1].style.opacity="1";
						aImg[now-1].style.filter='alpha(opacity:100)';
						aBtns[now].className="active";
						now--;
					}
				}
				arr.push(setInterval(function (){
					go(-1);
				},1500));
				/*移入移出*/
				oDiv1.onmouseover=function(){
					init();
				}
				oDiv1.onmouseout=function(){
					init();

					arr.push(setInterval(function()
						{//alert(dir);
							go(dir);
						},1500));
				}
				/*1 2 3 4 5 按钮控制*/
				for(var i=0;i<aBtns.length;i++)
				{	
					aBtns[i].index=i;
					aBtns[i].onclick=function()
					{
						now=this.index;
						for(var k=0;k<aBtns.length;k++)
						{
							aBtns[k].className=" ";
						}
						aBtns[now].className="active";
						init();
						for(var j=0;j<aImg.length;j++)
						{
							aImg[j].style.opacity=0.3;
							aImg[j].style.filter='alpha(opacity:30)';
						}
					if(this.index==0)
					{
						now=Math.floor(oDiv2.offsetLeft/(-20-ali[0].offsetWidth));					
						if(now==0)
						{
							now=5;
						}
					oDiv2.style.left=(-20-ali[0].offsetWidth)*(now-1)+'px';
						aImg[now-1].style.opacity=1;
						aImg[now-1].style.filter='alpha(opacity:100)';
						now--;
						arr.push(setInterval(function()
							{go(dir);},1500));
					}
					else if(this.index==aBtns.length-1)
					{
						now=Math.floor(oDiv2.offsetLeft/(-20-ali[0].offsetWidth));
						if(now==5)
						{
							now=0;
						}
					oDiv2.style.left=(-20-ali[0].offsetWidth)*(now+1)+'px';
						aImg[now+1].style.opacity=1;
						aImg[now+1].style.filter='alpha(opacity:100)';
						now++;
						arr.push(setInterval(function()
							{go(dir);},1500));
					}
					else
					{
						aImg[now-1].style.opacity=1;
						aImg[now-1].style.filter='alpha(opacity:100)';
						oDiv2.style.left=(-20-ali[0].offsetWidth)*(now-1)+'px';
						now--;
						arr.push(setInterval(function()
							{go(dir);},1500));
					}
					}
				}
				/*控制方向*/
				xz.onclick=function(){
					init();
					dir=-1;
					arr.push(setInterval(function()
							{go(-1);},1500));
				}
				xy.onclick=function(){
					init();
					dir=1;
					arr.push(setInterval(function()
							{go(1);},1500));
				}
			}
		</script>
	</head>
	<body>
		<div id="div1">
		<div id="btn1"><img src="./film/ljt.png"></div>
		<div id="btn2"><img src="./film/rjt.png"></div>
			<ul id="div2">
				<li><img src="./film/fj1.jpg" class="act" style="opacity: 1;filter: alpha(opacity:100);"></li>
				<li><img src="./film/fj2.jpg" /></li>
				<li><img src="./film/fj3.jpg"></li>
				<li><img src="./film/fj4.jpg"></li>
				<li><img src="./film/fj5.jpg"></li>
			</ul>
		</div>
		<div id="btn">
		<a href="javascript:;">PRE</a>
		<a href="javascript:;" class="active">1</a>
		<a href="javascript:;">2</a>
		<a href="javascript:;">3</a>
		<a href="javascript:;">4</a>
		<a href="javascript:;">5</a>
		<a href="javascript:;">NEXT</a>
		</div>
	</body>
</html>